<template>
    <d2-container class="departPage" type="full">
        <adv-search :fields="fields" @normal="onNormalSearch" @adv="onAdvSearch" style="width:400px" />
        <vxe-toolbar :refresh="{query:loadDepart}" custom print>
            <template #buttons>
                <el-button @click="loadDepart">
                    <d2-icon name="refresh"></d2-icon> 刷新
                </el-button>
                <el-button @click="exportDepart">
                    <d2-icon name="refresh"></d2-icon> 导出
                </el-button>
                <el-button @click="printDepart">
                    <d2-icon name="refresh"></d2-icon> 打印
                </el-button>
            </template>
        </vxe-toolbar>
        <div style="height: calc( 100% - 90px) ">
            <vxe-table :data="departs" height="auto" @cell-click="cellClickEvent" ref="dataTable" :export-config="{}" :print-config="{}" id="demoDepart" :custom-config="{storage: true}">
                <vxe-table-column title="操作" fixed="left" width="100">
                    <template #default="{row}">
                        <el-dropdown @command="actionColEvent">
                            <span class="el-dropdown-link">
                                操作功能<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="{cmd:'edit',row:row}">修改</el-dropdown-item>
                                <el-dropdown-item :command="{cmd:'del',row:row}">删除</el-dropdown-item>
                                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </vxe-table-column>
                <vxe-table-column type="checkbox" width="40"></vxe-table-column>
                <vxe-table-column field="f_id" title="f_id" sortable></vxe-table-column>
                <vxe-table-column field="f_pid" title="f_pid" sortable :filters="[{label: '顶级部门', value: 0}, {label: '子集部门', value: 1}]" :filter-method="filterPid"></vxe-table-column>
                <vxe-table-column field="f_departname" width="200px" title="f_departname" sortable></vxe-table-column>
                <vxe-table-column field="f_leader" title="f_leader" sortable></vxe-table-column>
                <vxe-table-column field="f_isused" title="f_isused" :formatter="formatIsUsed" sortable :filters="[{label: '可用', value: true}, {label: '不可用', value: false}]" :filter-multiple="false"></vxe-table-column>
                <vxe-table-column field="f_crtuser" title="f_crtuser" sortable></vxe-table-column>
                <vxe-table-column field="f_crttime" title="f_crttime" width="150px" sortable></vxe-table-column>
                <vxe-table-column field="f_edtUser" title="f_edtUser"></vxe-table-column>
                <vxe-table-column field="f_edttime" title="f_edttime" width="150px"></vxe-table-column>
                <vxe-table-column field="f_remark" title="f_remark"></vxe-table-column>
            </vxe-table>
        </div>
    </d2-container>
</template>
<script>
export default {
    name: "Depart",
    async mounted() {
        this.loadDepart();
    },
    data() {
        return {
            fields: [
                { value: "userName", label: "用户名", default: true },
                { value: "nickName", label: "昵称", type: "string" },
                {
                    value: "age",
                    label: "年龄",
                    type: "number",
                    config: { precision: 3, max: 20, min: 10 },
                },
                {
                    value: "sex",
                    label: "性别",
                    type: "bool",
                    config: { options: { active: "男", inactive: "女" } },
                },
                {
                    value: "status",
                    label: "状态",
                    type: "select",
                    config: {
                        options: [
                            { label: "新建", value: "1" },
                            { label: "执行中", value: "2" },
                            { label: "已完成", value: "3" },
                        ],
                    },
                },
                {
                    value: "createdTime",
                    label: "创建时间",
                    type: "date",
                    // operator: "daterange",
                    config: {
                        type: "daterange",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                    },
                },
            ],
            departs: [
                {
                    f_id: 9,
                    f_pid: null,
                    f_departname: "软件开发部",
                    f_leader: "张三",
                    f_isused: true,
                    f_crtuser: "测试管理员",
                    f_crttime: "2021-03-16T14:19:44",
                    f_edtUser: null,
                    f_edttime: null,
                    f_remark: null,
                },
            ],
        };
    },
    methods: {
        filterPid(data) {
            if (data.value == 1) return data.row.f_pid > 0;
            return data.row.f_pid == data.value;
        },
        formatIsUsed(val) {
            return val.cellValue ? "可用" : "不可用";
        },
        cellClickEvent(val) {
            console.log("cellClickEvent", val);
        },
        actionColEvent(cmd) {
            console.log("actionColEvent", cmd);
        },
        exportDepart() {
            this.$refs.dataTable.openExport({ original: true });
        },
        printDepart() {
            this.$refs.dataTable.openPrint({});
        },
        onNormalSearch(params) {
            this.$api.DEPART.QUERY_ALL_DEPART().then((data) => (this.departs = data));
        },
        onAdvSearch(params) {},
        loadDepart() {
            this.$api.DEPART.QUERY_ALL_DEPART().then((data) => (this.departs = data));
        },
    },
};
</script>
<style>
.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
}
</style> 